import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import Dialog from '@/components/dialog/Index'
import type { AnyObject } from '@/types'
import {  getAlreadyRevokedList } from '@/api/insurance/period'
import type { OperateRecordDto } from '@/api/insurance/period/types'
import { PlanTypeCnEnum } from '@/const/enum'
import type { FilterDto } from '@/render/FilterRender'

@Component
export class DialogAlreadyRevokedList extends TableRender {
    @Prop() show!: boolean
    @Prop() companyName!: string

    showDialog = false
    showDialogDetail = false
    curItem = {} as OperateRecordDto

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show')
    handleWatchShow(val: boolean) {
        this.showDialog = val
        if (this.show) {
            console.log(4444, this.filters)
            this.filters.companyName.value = this.companyName
            this.reloadPage(1)
        }
    }

    @Watch('showDialog')
    handleWatchShowDialog(val: boolean) {
        this.updateShow(val)
    }

    filterConfig() {
        return {
            companyName: {
                name: '公司',
                element: 'input'
            },
        } as FilterDto
    }

    tableConfig() {
        const config = super.tableConfig()
        config.height = '400px'
        return config
    }

    tableColumnConfigOld = () => [
        {
            field: 'companyName',
            title: '公司名称',
            width: 200
        },
        {
            field: 'msg',
            title: '操作类型',
        },
        {
            field: 'total',
            title: '人数',
        },
        {
            field: 'companyPlanName',
            title: '方案名称',
            width: 200
        },
        {
            field: 'type',
            title: '方案类型',
            formatter: ({row}) => {
                return PlanTypeCnEnum[row.type]
            }
        },
        {
            field: 'insurStartDate',
            title: '生效时间',
            width: 100
        },
        {
            field: 'createTime',
            title: '录入时间',
            width: 160
        },
        {
            field: 'managerName',
            title: '录入人',
        },
        {
            field: 'operationType',
            title: '状态',
            formatter: ({row}) => {
                return row.operationType === 2 ? '已撤销' : ''
            }
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            params: {
                buttons: [
                    {
                        text: '详情',
                        event: (row) => this.onShowDetail(row)
                    },
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<OperateRecordDto>

    onShowDetail(row: OperateRecordDto) {
        console.log(111, row)
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getAlreadyRevokedList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    } 

    render() {
        return (
            <Dialog
                v-model:show={this.showDialog}
                title="保单撤销记录"
                width="800px"
                v-slots={{
                    default: () => {
                        return <div>{super.render()}</div>
                    }
                }}
            ></Dialog>
        )
    }
}

export default toNative<{companyName: string}, {}>(DialogAlreadyRevokedList)
